<template>
  <div>
    <el-dialog class="select-carprod" title="选择装备详情" :visible.sync="selectprodnumVis" @close="close" width="1000px" append-to-body :close-on-click-modal='false'>

        <el-row>
        <el-col :span="24">
          <el-table :data="carProded" border style="width: 100%">
            <el-table-column label="图片" width="60">
              <template slot-scope="scope">
                <div>
                  <img style="width:40px;height:40px;" :src="scope.row.prodImg" alt="">
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="categoryTwoName" label="装备细类"></el-table-column>
            <el-table-column prop="prodCode" label="装备编号"></el-table-column>
            <el-table-column prop="prodName" label="装备名称"></el-table-column>
            <el-table-column prop="prodSpecial" label="规格" width="80"></el-table-column>
            <!-- <el-table-column prop="prodStocknum" label="库存数"></el-table-column> -->
            <el-table-column prop="prodResiduenum" label="可出库数"></el-table-column>
            <!-- <el-table-column prop="prodNum" label="添加数">
              <template slot-scope="scope">
                <div>
                  <el-input onkeyup="value=value.replace(/[^\d]/g,'')" size="mini" 
                    v-model="scope.row.prodNum" @input="changeNums($event,scope.row)"
                    placeholder="请输入数字"
                  ></el-input>
                </div>
              </template>
            </el-table-column> -->
            <el-table-column prop="emit" label="单位"></el-table-column>
            <el-table-column prop="areaName" label="库区"></el-table-column>
            <el-table-column prop="departmentCode" label="库位"></el-table-column>
            <el-table-column label="操作" width="180">
              <template slot-scope="scope">
                <el-button size="mini" icon="el-icon-delete" @click="SelectProdRfid(scope.row)">选择</el-button>
                <el-button size="mini" icon="el-icon-delete" @click="delSelectProd(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>


        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="close">取 消</el-button>
          <el-button size="small" type="primary" :loading="submitLoading" @click="selectprodSuccess()">确 定</el-button>
        </div>

        <select-stock-detail :openselectdetail.sync="openselectdetail" :stockId="stockId"></select-stock-detail>
    </el-dialog>
  </div>
</template>

<script>
import selectStockDetail from '@/views/carmanage/selectStockDetail';
import { addProdFromCar } from '@/api/car';
export default {
  name: 'selectnum',
  components: {
    selectStockDetail
  },
  props: ['selectnumDialog', 'carId'],
  data() {
    return {
      openselectdetail: false,
      selectprodnumVis: false,
      submitLoading: false,
      formLabelWidth: '90px',
      selectedProd: [],
      carProded: [],
      stockId: null,
    }
  },
  computed: {
    storeid() {
      return this.$store.state.store.store_id || getStore();
    },
    main_store() {
      return this.$store.state.store.main_store;
    },
    getSelectprod() {
      return this.$store.state.ware.selectProds;
    },
    getSelectDetail() {
      return this.$store.state.ware.stockDetail;
    },
  },
  watch: {
      selectnumDialog(newVal) {
          this.selectprodnumVis = newVal;
      },
      openselectdetail(newVal) {
        if (!newVal) {
          this.carProded.forEach( e => {
            if (this.getSelectDetail.length > e.prodResiduenum) {    //判断选择的详情条数是否低于可出库数
              this.$message({
                message: '选择条数不超过可出库数,请重新选择',
                type: 'warning'
              })
            } else {
              if (e.stockId == this.stockId) {
                let selectedArr = [];
                this.getSelectDetail.forEach( m => {
                  selectedArr.push(m.stockdetailsId)
                })
                e.stockDetails = selectedArr
              }
            }
            
          })
        }
      },
      selectprodnumVis(newVal) {
        let newArr = this.carProded.concat(this.getSelectprod);
        console.log(newArr)
        this.newSelect = JSON.parse(JSON.stringify(newArr));
        for( let n = 0; n < this.newSelect.length; n++) {        
            this.newSelect[n].edit_id = n + 1;
        }
        // 去除里面重复的商品
        this.carProded = this.newSelect.filter((item, index, origin) => 
            index === origin.findIndex(itemInner => {
            return itemInner.stockId === item.stockId
            }
        ))
      }
  },
  mounted() {
    
  },
  methods: {
    
     // 输入添加数时进行判断
    changeNums(value,item) {
      let newStock = parseInt(item.prodResiduenum);
      let newVal = parseInt(value);
      let ifTrue = newStock - newVal;
      if (ifTrue < 0) {
        this.$message({
          message: '库存数不足,请重新输入',
          type: 'warning'
        })
        item.prodNum = ""
      }
    },
    delSelectProd(el) {
      this.carProded = this.carProded.filter( e => e.edit_id != el.edit_id);
    },
    
    close() {
      this.selectprodnumVis = false;
      this.$emit("update:selectnumDialog", false);
      this.$store.commit('ware/SET_SELECTPROD', []);
    },
    SelectProdRfid(item) {
      this.openselectdetail = true;
      this.stockId = item.stockId
    },
    
    selectprodSuccess() {
      let arrOut = this.carProded.filter( el => {    // 未输入出库数的装备
          if (!el.stockDetails || el.stockDetails.length == 0) {
            return el
          }
      })
      if (arrOut.length != 0) {
        this.$message({
          message: '请为全部装备选择详情',
          type: 'warning'
        })
      } else {
        var reqData = []
        this.carProded.forEach( e => {
          let newProdObj = {
            carid: this.carId,
            stockId: e.stockId,
            num: e.stockDetails.length,
            stockDetails: e.stockDetails
          }
          reqData.push(newProdObj)
        })
        console.log(reqData)
        
        addProdFromCar(reqData).then( res => {
          this.$message({
            message: res.data.msg,
            type: 'success'
          })
          this.$store.commit('ware/SET_SELECTPROD', this.selectedProd);
          this.$store.commit('ware/SET_STOCKDETAIL', []);
          this.selectprodnumVis = false;
          this.$emit("update:selectnumDialog", false);
        })
      }
      
    },
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/config.scss';

  .label-wrap {
    &.category { @include labelwrap(left,50,40); }
    &.date {
      @include labelwrap(center,50,40); }
    &.keyword { @include labelwrap(right,110,40); }
  }
  .autospace {
    height: 30px;
  }
  
</style>